import { Avatar, Button, Dropdown, MenuProps, message } from 'antd';
import type { NextPage } from 'next';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useState } from 'react';
import { navs } from './config';
import { useStore } from '@/store';
import request from 'service/fetch';
import styles from './index.module.scss';
import Login from '../Login';
import { HomeOutlined, LoginOutlined } from '@ant-design/icons';
// observer 函数将React组件转化为响应式组件
import { observer } from 'mobx-react-lite';

const Navbar: NextPage = () => {
  /** store */
  const store = useStore();
  const { userId, avatar } = store.user.userInfo;
  /** 路由信息 */
  const { pathname, push } = useRouter();
  /** login弹窗 */
  const [isShowLogin, setIsShowLogin] = useState(false);

  /** 写文章 */
  const handleGotoEditorPage = () => {
    if(userId) {
      push('/editor/new')
    } else {
      message.warning('请先登录')
    }
  };

  /** 登录 */
  const handleLogin = () => {
    setIsShowLogin(true);
  };

  /** 关闭login弹窗 */
  const handleClose = () => {
    setIsShowLogin(false);
  };

  const handleGotoPersonalPage = () => {
    console.log('进入个人主页')
    push(`/user/${userId}`);
  };

  const handleLogout = () => {
    request.post('/api/user/logout').then((res: any) => {
      if (res?.code === 0) {
        store.user.setUserInfo({});
      }
    });
  };


  const items: MenuProps['items'] = [
    {
      key: '1',
      label: '个人主页',
      icon: <HomeOutlined />,
    },
    {
      key: '2',
      label: "退出登录",
      icon: <LoginOutlined />,
    },
    // {
    //   key: '3',
    //   label: (
    //     <a
    //       target="_blank"
    //       rel="noopener noreferrer"
    //       href="https://www.luohanacademy.com"
    //     >
    //       3rd menu item (disabled)
    //     </a>
    //   ),
    //   disabled: true,
    // },

  ];

  const onClick: MenuProps['onClick'] = ({ key }) => {
    console.log(key);
    switch (key) {
      case '1': handleGotoPersonalPage(); break
      case '2': handleLogout();break
      default: null;
    }
  };

  return (
    <div className={styles.navbar}>
      <section className={styles.logoArea}>BLOG-C</section>
      <section className={styles.linkArea}>
        {navs?.map((nav) => (
          <Link key={nav?.label} href={nav?.value}>
            <span className={pathname === nav?.value ? styles.active : ''}>
              {nav?.label}
            </span>
          </Link>
        ))}
      </section>
      <section className={styles.operationArea}>
        <Button onClick={handleGotoEditorPage}>写文章</Button>

        {userId ? (
          <>
            <Dropdown menu={{items,onClick}} placement="bottomLeft">
              <Avatar src={avatar} size={32} />
            </Dropdown>
          </>
        ) : (
          <Button type="primary" onClick={handleLogin}>
            登录
          </Button>
        )}
      </section>
      <Login isShow={isShowLogin} onClose={handleClose} />
    </div>
  );
};

export default observer(Navbar);
